<template>
  <!-- 历史数据页面 -->
  <div class="history-container">
    <!--    <div class="top">-->
    <!--      <div class="fanhui-btn" @click="$emit('back')">-->
    <!--        <i class="el-icon-arrow-left"></i>-->
    <!--        <span>返回</span>-->
    <!--      </div>-->
    <!--      <div class="lujing">-->
    <!--        <span>当前位置：主动预警/历史记录</span>-->
    <!--      </div>-->
    <!--    </div>-->

    <div class="history">

      <menu-element />

    </div>
    <div>
      <el-button class=" btn-nav-bg stripe-btn" @click="$router.push({ path: '/alarmHistory' })">返回</el-button>
    </div>

    <div class="content">
      <el-tabs v-model="activeTabName" type="border-card">
        <div v-show="activeTabName !== '1'" class="left-content">
          <selectCard :typeIndex="2" ref="selectCard"></selectCard>
        </div>
        <!--        <div v-show="activeTabName == 2" class="left-content">-->
        <!--          <selectCardTwo ref="selectCard"></selectCardTwo>-->
        <!--        </div>-->
        <!-- <el-tab-pane name="1" label="告警历史">
          <warnHistory :curParamName="curParamName" ref="warnHistory"></warnHistory>
        </el-tab-pane> -->
        <el-tab-pane name="2" label="历史数据">
          <!-- <history1 :type="type" ref="history1"></history1> -->
          <fukang-history-component :type="type" ref="history1"></fukang-history-component>
        </el-tab-pane>

        <!--        <el-tab-pane name="2" label="均值对比">-->
        <!--          <history2 :type="type" ref="history2"></history2>-->
        <!--        </el-tab-pane>-->

        <el-tab-pane name="3" label="家族对比">
          <fukang-family-p-k :type="type" ref="history3"></fukang-family-p-k> 

        </el-tab-pane>

        <!--        <el-tab-pane name="4" label="故障分布明细">-->
        <!--          <history4 :type="type" ref="history4"></history4>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import WarnHistory from "./warnHistory.vue";
import history2 from "./history2.vue";
import history3 from "./history3.vue";
import history4 from "./history4.vue";
import selectCard from "./selectCard.vue";
import MenuElement from "@/components/MenuElement/index.vue";
import FukangHistoryComponent from "@/views/FukangHistoryComponent/index.vue"; // 阜康历史数据
import FukangFamilyPK from "@/views/FukangFamilyPK/index.vue"; // 阜康历史数据



// import selectCardTwo from "./selectCardTwo.vue";
export default {
  name: "historyState",
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  components: {
    selectCard,
    // selectCardTwo,
    // WarnHistory,
    // history1,
    // history2,
    // history3,
    // history4,
    MenuElement,
    FukangHistoryComponent, // 阜康历史数据
    FukangFamilyPK, // 阜康家族对比
  },
  data() {
    return {
      activeTabName: "2",
      curParamName: "",
    };
  },
  destroyed() { },
  mounted() {
    this.curParamName = this.$route.query.paramName;
  },
  methods: {

  },
};
</script>
<style scoped lang="less">
.history-container {
  height: 100%;
  position: relative;

  .history {
    position: absolute;
    // top: 35px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
  }

  .top {
    height: 60px;
    display: flex;
    align-items: center;
    color: #fff;

    .fanhui-btn {
      cursor: pointer;

      span {
        margin-left: 5px;
      }
    }

    .lujing {
      margin-left: 50px;
    }
  }

  ::v-deep .content {
    height: 100%;

    .el-tabs {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 40px);

        .left-content {
          position: absolute;
          height: calc(100% - 30px);
        }

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}

.tab-pane-wrapper {
  height: 100%;
  //display: flex;
  //.content-right {
  //  flex: 1;
  //  height: 100%;
  //  margin-left: 20px;
  //  padding: 20px;
  //  border: 1px solid #006686;
  //  .form-search {
  //    margin-bottom: 16px;
  //    .fastTimeBtn {
  //      color: #c6d3ec;
  //      font-size: 16px;
  //      font-weight: 500;
  //      margin-right: 16px;
  //      cursor: pointer;
  //    }
  //  }
  //}
}
</style>
